<template>
  <view>
    <customtop top_title="新的好友"></customtop>
    <view class="new_friend" v-if="!loading">
      <view class="tabs">
        <span class="item" :class="status == 3 ? 'on' : ''" @click="setStatus(3)">好友申请</span>
        <span class="item" :class="status == 2 ? 'on' : ''" @click="setStatus(2)">我的申请</span>
      </view>
      <view v-if="users.length > 0">
        <view class="items">
          <view class="item" v-for="(item, index) in users" :key="index" @click="jumpPage('/pages/im/friend_index?id=' + item.id)">
            <view class="bd">
              <image class="avatar" :src="item.avatar" mode="scaleToFill" />
              <view class="maininfo">
                <view class="name">{{item.nickname}}</view>
              </view>
              <view class="btnbox">
                <span class="btn" v-if="[2, 3].includes(item.friend_status)">查看</span>
                <span class="apply_status" v-if="[1].includes(item.friend_status)">已同意</span>
                <span class="apply_status" v-if="[4].includes(item.friend_status)">已拒绝</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-empty
        v-if="users.length == 0"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
        text="暂无新的好友~"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"
export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      users: [],
      status: 3,
    }
  },

  onLoad: function() {
    uni.showLoading();
    request.post('/im/emptyNewFriendCount');
  },

  onShow: function() {
    this.getRequestFriends();
  },

  methods: {
    getRequestFriends: function() {
      let params = { status: this.status };
      request.post('/im/getRequestFriends', params).then(res => {
        this.loading = false;
        uni.hideLoading();
        this.users = res.data;
      })
    },

    setStatus: function(status) {
      this.status = status;
      uni.showLoading();
      this.getRequestFriends();
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url('im.css');
page {
  background-color: #fff;
  padding-bottom: 30rpx;
}
</style>
